<!DOCTYPE html>
<html>
<head>
  <title>My first three.js app</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script>
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  var radius = 5;
  var segments = 64;
  var thetaStart = 0;
  var thetaLength = Math.PI / 3; // 1/6 of a circle

  // Create a circle geometry
  var geometry = new THREE.CircleGeometry(radius, segments, thetaStart, thetaLength);

  var material = new THREE.MeshBasicMaterial({
    color: 0xff0000, // red
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.5
  });

  var radar = new THREE.Mesh(geometry, material);
  scene.add(radar);

  camera.position.z = 10;

  function animate() {
    requestAnimationFrame(animate);

    radar.rotation.z += 0.01;

    renderer.render(scene, camera);
  }

  animate();
</script>
</body>
</html>
